<template>
	<view class="index">
		<!-- 搜索 -->
		<view class="header">
			<view class="logo">
				<image src="../../static/images/logo.png" mode=""></image>
			</view>
			<view class="search">
				<input type="text" name="" id="" placeholder="请输入" />
			</view>
			<view class="btn">搜索</view>
		</view>
		<!-- 导航 -->
		<scroll-view scroll-x="true" enable-flex class="nav">
			<view class="item" :class="{active:activeIndex==-1}" @click="getactive(-1)">推荐</view>
			<view class="item" v-for="(item,index) in navList" :key="index" :class="{active:index==activeIndex}"
				@click="getactive(index,item.L1Id)">
				{{item.text}}
			</view>
		</scroll-view>

		<!-- 推荐 -->
		<recommend v-if="activeIndex==-1" :policyDescList="policyDescList" :navList="navList"
			:categoryModule="categoryModule"></recommend>

		<!-- 其他分类组件 -->
		<menucate v-else :cateId="cateId"></menucate>
	</view>
</template>

<script>
	import base from '@/utils/base.js'
	import request from '@/utils/request.js'
	import recommend from '@/components/recommed/recommed.vue'
	import menucate from '@/components/menucate/menucate.vue'
	export default {
		data() {
			return {
				navList: [],
				activeIndex: -1,
				policyDescList: [],
				categoryModule: [],
				cateId:''
			}
		},
		components: {
			recommend,
			menucate
		},
		onLoad() {},
		created() {
			this.getIndexData()
		},
		methods: {
			async getIndexData() {
				let res = await request(base.indexData)
				console.log(res);
				this.navList = res.kingKongModule.kingKongList
				this.policyDescList = res.policyDescList
				this.categoryModule = res.categoryModule
				console.log('this.policyDescList', this.policyDescList);

			},
			getactive(index, id) {
				this.activeIndex = index
				console.log(index, id)
				this.cateId = id
			},

		}
	}
</script>

<style lang="scss" scoped>
	// 搜索
	.header {
		height: 50rpx;
		display: flex;

		.logo {
			width: 140rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search {
			border: 1px solid #eee;
			border-radius: 10rpx;
			flex: 1;
			margin: 0 10rpx;
			padding-left: 14rpx;
		}

		.btn {
			border: 1px solid #ccc;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: 400;
		}
	}

	// nav
	.nav {
		white-space: nowrap;
		width: 100%;
		display: flex;
		height: 70rpx;

		.item {
			// flex:1;
			display: inline-block;
			margin: 10rpx 16rpx;

			&.active {
				color: red;
				border-bottom: 1px solid #ff5555;
			}
		}
	}
</style>